<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function Vue({ data }) {
        this._data = data;

        // 数据代理
        for (let key in this._data) {
          Object.defineProperty(this, key, {
            get: function ProxyGetter() {
              return this._data[key];
            },
            set: function ProxySetter(newVal) {
              this._data[key] = newVal;
            },
          });
        }

        // 数据劫持之前判断数据是否需要数据劫持
        observe(this._data);
      }

      function observe(value) {
        if (typeof value !== "object" || value === null) {
          return;
        }
        // console.log(11111);
        new Observer(value);
      }

      class Observer {
        constructor(value) {
          this.value = value;
        }

        observeArray() {
          if (Array.isArray(this.value)) {
            thie.value.forEach((item) => {
              observe(item);
            });
          }
        }

        walk() {
          for (let key in this.value) {
            let value = this.value[key];

            defineReactive(this.value, key, value);
          }
        }
      }

      function defineReactive(obj, key, value) {
        observe(value);
        console.log("11111");

        Object.defineProperty(obj, key, {
          get: function ReactiveGetter() {
            console.log("getter");
            console.log("11111");

            return value;
          },
          set: function (newVal) {
            console.log("setter");
            value = newVal;
          },
        });
      }

      let vm = new Vue({
        data: {
          name: "pp",
          age: 11,
          friend: ["nancy", "sophe", "judy"],
          score: {
            Chinese: 100,
            English: 120,
          },
        },
      });
    </script>
  </body>
</html>
